<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 实现小方块移动效果动画 */
			.movebox{
				width: 100px;
				height: 100px;
				background-color: #EE1166;
				
				/* 要使动画形成，改变元素position 位置 */
				position: relative;	/* 相对，这种位置类型，才能移动页面元素 */
				
				/* 动画样式 
					mymove 自己起的动画脚本
					5s 变化时间，整个移动过程耗时5s
					infinite 反复播放，默认播放一次
				*/
				animation: mymove 2s infinite;
			}
			/* 动画脚本（关键帧 keyframe） 
				动画名称和上面animation定义名称要一致
				from开始状态，to结束状态，动画原理它会自动填充中间过程
			*/
			@keyframes mymove{
				from{left: 0px;}
				to{left: 300px;}
			}
		</style>
	</head>
	<body>
		<div class="movebox"></div>
	</body>
</html>
